<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>书签管理器</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
			font-size: 13px;
		}

		html,
		body {
			width: 100%;
			height: 100%
		}

		ul,
		li {
			list-style: none;
		}

		#container {
			width: 100%;
			height: 100%;
			background-color: #b2c8bb;
			display: flex;
			flex-direction: column;
		}

		#container .header {
			height: 60px;
			background: #4e4949;
			display: flex;
		}

		#container .header .header-left {
			flex: 1;
		}

		#container .header .header-left .bks {
			color: #fff;
			margin-top: 25px;
			margin-left: 20px;
		}

		#container .header .header-right {
			flex: 5;
		}

		#container .header .header-right .search {
			position: relative;
			top: 10px;
			left: 15%;
			width: 50%;
			height: 40px;
			background: #313030;
			border-radius: 4px;
			padding: 8px 10px;
		}

		#container .header .header-right .search #placeholder {
			display: block;
			position: absolute;
			top: 10px;
			left: 12px;
			color: #ddd;
			font-size: 14px;
			cursor: text;
		}

		#container .header .header-right .search .search-input {
			width: 100%;
			height: 100%;
			background: transparent;
			color: #fff;
			font-size: 14px;
			border: none;
			outline: none;
		}

		#container .main {
			flex: 1;
			display: flex;
			overflow: hidden;
		}

		#container .main .main-left {
			flex: 1;
		}

		#container .main .main-right {
			flex: 5;
			overflow-y: scroll;
		}

		#container .main .main-right #dataList {
			width: 60%;
			position: relative;
			top: 20px;
			left: 15%;
			margin-bottom: 40px;
		}

		#container .main .main-right #dataList .list-li {
			width: 100%;
			height: 42px;
			line-height: 30px;
			margin-bottom: 3px;
			cursor: pointer;
			border: 1px solid #fff;
			padding: 5px 10px;
			background-color: #fff;
			border-radius: 4px;
			overflow: hidden;
			box-shadow: 5px 5px 10px #888;
			-webkit-transition: all 0.15s;
			-moz-transition: all 0.15s;
			-o-transition: all 0.15s;
		}

		#container .main .main-right #dataList .list-li:hover {
			-webkit-transform: scale(1.025);
			-moz-transform: scale(1.025);
			-o-transform: scale(1.025);
		}

		#container .main .main-right #dataList .list-li .icon {
			position: relative;
			top: 3px;
			left: 0px;
		}

		#container .main .main-right #dataList .list-li .text {
			margin-left: 5px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function () {
			// 获取数据源
			var dataSource = document.getElementById("dataSource");
			// 获取list容器
			var dataList = document.getElementById("dataList");
			dataList.innerHTML = "";
			// 循环插入数据
			var list = dataSource.getElementsByTagName("A");
			// 统计
			document.getElementById("bk_sum").innerHTML = list.length;
			for (var i = 0; i < list.length; i++) {
				var data = list[i];
				var li = createLi(data.href, data.getAttribute("ICON"), data.innerHTML);
				dataList.appendChild(li);
			}
		}
		// 搜索内容
		var timer = null;
		function searchValue() {
			var searchText = document.getElementById("searchInput").value;
			// 删除placeholder
			var placeholder = document.getElementById("placeholder");
			if (searchText.length > 0) {
				placeholder.style.display = "none";
			} else {
				placeholder.style.display = "block"
			}
			// 判断输入值是否是空格，若是，则返回
			if (searchText.length > 0 && searchText.replace(/(^\s*)|(\s*$)/g, "") == "") {
				return;
			}
			// 延迟搜索
			clearTimeout(timer);
			timer = setTimeout(function () {
				updateDataList();
				clearTimeout(timer);
			}, 300);
		}
		// 更新书签列表方法
		function updateDataList() {
			var searchText = document.getElementById("searchInput").value.replace(/(^\s*)|(\s*$)/g, "");
			// 获取资源库
			var dataSource = document.getElementById("dataSource");
			var list = dataSource.getElementsByTagName("A");
			// 初始化一个空数组来存放搜索到的数据
			var arr = new Array();
			for (var i = 0; i < list.length; i++) {
				var data = list[i];
				if (data.innerHTML.toLowerCase().indexOf(searchText) > -1) {
					arr.push(data);
				}
			}
			// 清空列表，装载搜索到的数据
			var dataList = document.getElementById("dataList");
			dataList.innerHTML = "";
			for (var i = 0; i < arr.length; i++) {
				var data = arr[i];
				var li = createLi(data.href, data.getAttribute("ICON"), data.innerHTML);
				dataList.appendChild(li);
			}
		}
		// 创建LI标签
		function createLi(url, icon, text) {
			// 创建li标签
			var li = document.createElement("li");
			li.className = "list-li";
			// 给li绑定点击事件
			li.addEventListener("click", function () {
				window.open(url);
			});
			// 创建img标签
			var img = document.createElement("img");
			img.src = icon;
			img.className = "icon";
			// 创建span标签
			var span = document.createElement("span");
			span.innerHTML = text;
			span.className = "text";
			// 追加节点
			li.appendChild(img);
			li.appendChild(span);
			return li;
		}
	</script>
</head>

<body>
	<div id="container">
		<div class="header">
			<div class="header-left">
				<div class="bks">已收藏书签：<span id="bk_sum"></span></div>
			</div>
			<div class="header-right">
				<div class="search">
					<label id="placeholder" for="searchInput">搜索书签</label>
					<input type="text" name="search-input" class="search-input" id="searchInput"
						oninput="searchValue()" />
				</div>
			</div>
		</div>
		<div class="main">
			<div class="main-left">

			</div>
			<div class="main-right">
				<!-- 书签列表 -->
				<ul id="dataList"></ul>
			</div>
		</div>
	</div>

	<!-- 添加书签步骤： -->
	<!-- 1.导出浏览器书签到html文件 -->
	<!-- 2.将hmtl文件中的<DT><A>...</A>标签复制到<DL></DL>中保存 -->
	<DL id="dataSource" style="display: none;">
		<DT><A HREF="chrome://bookmarks/" ADD_DATE="1600307769"
			ICON="">书签</A>
	<DT><A HREF="chrome-extension://fbmkfdfomhhlonpbnpiibloacemdhjjm/history.html" ADD_DATE="1607005507"
			ICON="">History
			| Recent History</A>
	<DT><A HREF="https://chrome.google.com/webstore/category/themes?hl=zh-CN" ADD_DATE="1602673061"
			ICON="">Chrome
			网上应用店 - 主题背景</A>
	<DT><A HREF="http://172.16.254.6/" ADD_DATE="1600094627">上网登录页</A>
	<DT><A HREF="http://172.16.254.6/drcom/login?callback=dr1570799477150&DDDDD=13767192825%40cmcc&upass=123123&0MKKey=123456&R1=0&R3=0&R6=0&para=00&v6ip=&_=1570799467848/"
			ADD_DATE="1600094627">卢本伟流弊</A>
	<DT><A HREF="https://www.google.com.hk/webhp?hl=zh-CN&sourceid=cnhp&gws_rd=ssl"
			ADD_DATE="1600258424"
			ICON="">Google</A>
	<DT><A HREF="http://www.csgmooc.com/12943//" ADD_DATE="1600094627"
			ICON="">江西现代职业技术学院</A>
	<DT><A HREF="http://xiaoxingxing.top/" ADD_DATE="1600094627"
			ICON="">小星星</A>
	<DT><A HREF="http://dict.youdao.com/" ADD_DATE="1602743418"
			ICON="">有道首页</A>
	<DT><A HREF="http://www.iciba.com/" ADD_DATE="1603766705"
			ICON="">金山词霸</A>
	<DT><A HREF="http://fanyi.baidu.com/?aldtype=16047#en/zh/" ADD_DATE="1600094627"
			ICON="">百度翻译</A>
	<DT><A HREF="https://www.bilibili.com/" ADD_DATE="1600094627"
			ICON="">哔哩哔哩
			(゜-゜)つロ 干杯~-bilibili</A>
	<DT><A HREF="http://music.163.com/" ADD_DATE="1600094627"
			ICON="">网易云音乐</A>
	<DT><A HREF="https://www.w3school.com.cn/css/index.asp" ADD_DATE="1600094627"
			ICON="">CSS
			教程</A>
	<DT><A HREF="https://blog.csdn.net/weixin_46170034/category_9694451.html" ADD_DATE="1600094627"
			ICON="">HTML5及CSS学习_weixin_46170034的博客_菜鸟小铭-CSDN博客</A>
	<DT><A HREF="http://leagueskin.net/p/download-mod-skin-2020-chn" ADD_DATE="1601741812"
			ICON="">Download
			MOD SKIN LOL 2020 | League Skin</A>
	<DT><A HREF="https://passport2.chaoxing.com/login?fid=&newversion=true" ADD_DATE="1600094627">登录</A>
	<DT><A HREF="https://msdn.itellyou.cn/" ADD_DATE="1600094627"
			ICON="">MSDN,
			我告诉你</A>
	<DT><A HREF="http://www.521luntan.cn/forum.php?mod=forumdisplay&fid=37&tdsourcetag=s_pcqq_aiomsg"
			ADD_DATE="1600094627"
			ICON="">电脑游戏
			- 火烽游戏工作室 - Powered by Discuz!</A>
	<DT><A HREF="http://www.newxitong.com/?zm" ADD_DATE="1600094627"
			ICON="">专注于Win7
			- 致力于做最好用的win7系统【吻妻官网】</A>
	<DT><A HREF="http://www.json.cn/" ADD_DATE="1600094627"
			ICON="">JSON在线解析及格式化验证
			- JSON.cn</A>
	<DT><A HREF="https://cdn.baomitu.com/" ADD_DATE="1600094627">静态资源托管库</A>
	<DT><A HREF="https://blog.csdn.net/huxdl/article/details/53856952" ADD_DATE="1600094627"
			ICON="">如何用kali
			Linux进行DNS欺骗、窃取cookies，使用SSLstrip - CSDN博客</A>
	<DT><A HREF="http://www.freebuf.com/sectool/14047.html" ADD_DATE="1600094627"
			ICON="">Cookie利用神器：CookieHacker
			- FreeBuf互联网安全新媒体平台 | 关注黑客与极客</A>
	<DT><A HREF="https://www.microsoft.com/zh-cn/software-download/windows10?OCID=WIP_r_Win10_Body_AddPC"
			ADD_DATE="1600094627"
			ICON="">下载
			Windows 10</A>
	<DT><A HREF="http://music.163.com/song/media/outer/url?id=(id).mp3" ADD_DATE="1600094627"
			ICON="">网易下载链接</A>
	<DT><A HREF="https://www.bilibili.com/video/av48083899?share_medium=android&share_source=qq&bbid=7AE6593A-8DC3-4179-8B74-5732D204C7E1163042infoc&ts=1554201808427"
			ADD_DATE="1600094627"
			ICON="">[灵盾网]中职网络空间安全
			- 使用KVM开启靶机系统进行实训_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili</A>
	<DT><A HREF="http://how2j.cn/" ADD_DATE="1600094627"
			ICON="">How2J
			的 Java教程</A>
	<DT><A HREF="https://www.cnblogs.com/lvchenfeng/p/5596572.html" ADD_DATE="1600094627"
			ICON="">ettercap局域网内DNS欺骗(隔壁的哥们轻一点
			...) - 绿尘枫 - 博客园</A>
	<DT><A HREF="https://ctf.bugku.com/" ADD_DATE="1600094627"
			ICON="">BugkuCTF
			- 练习平台</A>
	<DT><A HREF="https://console.cli.im/nedit/25460504?categoryId=3841669&p=1&pageFrom=codeInfo"
			ADD_DATE="1600094627"
			ICON="">编辑-猪猪爱你哟！</A>
	<DT><A HREF="https://next.itellyou.cn/Original/Index" ADD_DATE="1600094627"
			ICON="">原版软件</A>
	<DT><A HREF="https://greasyfork.org/zh-CN" ADD_DATE="1600094627"
			ICON="">Greasy
			Fork - 安全、实用的用户脚本大全</A>
	<DT><A HREF="https://jianwai.youdao.com/index/0" ADD_DATE="1600094627"
			ICON="">网易见外工作台</A>
	<DT><A HREF="https://www.vipiu.net/archives/2019/03/24/1114.html" ADD_DATE="1600094627"
			ICON="">斐讯K2最新版V22.6.529.216刷机教程
			| 爱游博客</A>
	<DT><A HREF="https://blog.csdn.net/bingyu880101/article/details/82915433" ADD_DATE="1600094627"
			ICON="">[2018-10-1]斐讯K2
			PSG1218 A2 刷bread 和第三方老毛子Padavan固件_SevenFighting的专栏-CSDN博客</A>
	<DT><A HREF="https://www.rainyun.com/" ADD_DATE="1600327263"
			ICON="">雨云
			- 中国新一代云提供商|高速虚拟主机|云服务器|挂机宝|免费CDN</A>
	<DT><A HREF="https://www.centbrowser.cn/" ADD_DATE="1600344590"
			ICON="">百分浏览器
			- 追求速度、简约和安全的网络浏览器</A>
	<DT><A HREF="https://blog.csdn.net/Jailman/article/details/78479075" ADD_DATE="1601363408"
			ICON="">(1条消息)
			Cookie注入实战（非SQL注入）_神棍之路-CSDN博客</A>
	<DT><A HREF="https://www.cnblogs.com/hider/p/11614688.html" ADD_DATE="1603109935"
			ICON="">Typora入门：全网最全教程
			- Hider1214 - 博客园</A>
	<DT><A HREF="https://photo.baidu.com/photo/web/album" ADD_DATE="1603703196"
			ICON="">一刻相册：百度网盘出品，无限空间云相册</A>
	<DT><A HREF="http://www.zaixianai.cn/voiceCompose" ADD_DATE="1603851302"
			ICON="">在线语音合成|在线文字转语音|文字转换语音|文字转语音-在线AI转换官网</A>
	<DT><A HREF="https://www.cnblogs.com/wqvincent/" ADD_DATE="1604044208"
			ICON="">WQVincent</A>
	<DT><A HREF="http://www.html22.com/zh/" ADD_DATE="1604044558">网页转换助手</A>
	<DT><A HREF="https://www.cnblogs.com/emanlee/p/10769456.html" ADD_DATE="1604046358"
			ICON="">office
			2019 下载地址 - emanlee - 博客园</A>
	<DT><A HREF="https://free-ss.site/" ADD_DATE="1604084492"
			ICON="">免费上网账号</A>
	<DT><A HREF="https://leetcode-cn.com/problemset/all/" ADD_DATE="1604386233"
			ICON="">题库
			- 力扣 (LeetCode) 全球极客挚爱的技术成长平台</A>
	<DT><A HREF="https://www.cnblogs.com/yxc-160206/p/13620093.html" ADD_DATE="1604573205"
			ICON="">解决错误：error:
			failed to push some refs to - 夜空星满 - 博客园</A>
	<DT><A HREF="https://www.bilibili.com/read/cv6506359" ADD_DATE="1604608743"
			ICON="">如何在码云Gitee中部署个人静态网站？git提交网站
			- 哔哩哔哩</A>
	<DT><A HREF="https://ikuuu.ltd/user##" ADD_DATE="1605056160"
			ICON="">首页
			— iKuuu VPN</A>
	<DT><A HREF="https://www.lanzoux.com/iFfZPfxsl7e" ADD_DATE="1607012043"
			ICON="">小黑课堂计算机二级Office题库5.6.exe
			- 蓝奏云</A>
	<DT><A HREF="https://www.imahuatv.com/" ADD_DATE="1607183215"
			ICON="">麻花影视-麻花电影-免费在线观看最新电视剧和电影,就上最快麻花影院</A>
	<DT><A HREF="http://www.520lyqm.cn/index.php/buy/index/1/?" ADD_DATE="1606572390"
			ICON="">公益免费主机
			- 订购产品 - 诚少云互联</A>
	<DT><A HREF="http://fw.amr.jiangxi.gov.cn/wsdjindex.html" ADD_DATE="1607620850"
			ICON="">江西省企业登记网络服务平台</A>
	<DT><A HREF="https://ctf.bugku.com/login" ADD_DATE="1607950075">登录 - Bugku CTF</A>
	<DT><A HREF="https://pc.woozooo.com/mydisk.php" ADD_DATE="1608636358"
			ICON="">蓝奏云</A>
	<DT><A HREF="https://www.itsk.com/thread-413566-1-1.html" ADD_DATE="1608646756"
			ICON="">优启通
			v3.6.2020.1111（2020.12.03 发布）_IT天空原创软件_IT天空</A>

	</DL>
</body>

</html>